<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{width:1000px;height:100px;padding:10px 0;position: relative;border: solid 1px black;margin-bottom:50px;}
        .xbox1{width:100px;height:100px;background: red;position: absolute;left:0;}
        .box2{width:1000px;height:100px;padding:10px 0;position: relative;border: solid 1px black;}
        .xbox2{width:100px;height:100px;background: red;position: absolute;left:0;}
    </style>
</head>
<body>
    <div class="box1">
        <div class="xbox1"></div>
    </div>
</body>
<script>

    const obox1 = document.querySelector(".box1");
    const oxbox1 = document.querySelector(".xbox1");

    obox1.onmouseover = function(){
        move(oxbox1, {
            width: 500,
            height: 101
        });
    }

    // 为了能方便的传入多组属性和目标，将属性和目标打包成对象数据
    // 封装内，解析对象，拿到键作为属性，拿到值作为目标

    function move(ele, obj){
        clearInterval(ele.time);
        ele.time = setInterval(()=>{
            // 1. 默认计时器要被清除（提前设置状态，要清除计时器的状态）
            let flag = true;
            for(let i in obj){
                let now = parseInt(getStyle(ele, i));

                let speed = (obj[i] - now) / 10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                ele.style[i] = now + speed + "px";

                // 2. 只要有一个属性没到目标，一定不清除计时器（修改状态）
                if(now !== obj[i]){
                    flag = false
                }
            }
            // 3. 根据状态决定是否要清除计时器
            if(flag){
                clearInterval(ele.time);
            }
        }, 30);
    }

    // 问题：有一个属性到目标了，计时器就被清除了
    // 解决：有一个属性到目标了，先不清除计时器，保证所有属性都到目标
    // 默认计时器要被清除
    // 只要有一个属性没到目标，一定不清除计时器



    // 获取非行内样式的兼容封装
    function getStyle(ele, attr){
        if(getComputedStyle){
            return getComputedStyle(ele)[attr];
        }else{
            return ele.currentStyle[attr];
        }
    }

    
</script>
</html>